<template>
  <el-dialog
    width="800px"
    :title="$t('m.add')+$t('m.page.container')"
    :visible.sync="dialogVisible"
    :before-close="close"
    :close-on-click-modal="false">
    <el-form
      ref="form"
      label-position="right"
      label-width="120px"
      size="small"
      align="left"
      :rules="ruleForm"
      :model="formInline">
      <el-row>
        <el-col :span="22" :offset="1">
          <el-form-item :label="$t('m.warehouse')">
            <el-input maxlength="20" show-word-limit v-model="$store.state.basicInfo.warehouseInfo.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"  :offset="1">
          <el-form-item :label="$t('m.page.container')+$t('m.type')" prop="containertypeid">
            <el-select v-model="formInline.containertypeid" @change="handleChange">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item.containertypename"
                :value="item.containertypeid"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item :label="$t('m.container.code')" prop="code">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item :label="$t('m.container.containertypecode')">
            <el-input maxlength="20" show-word-limit v-model="containertypecode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item :label="$t('m.container.containercode')">
            <el-input maxlength="20" show-word-limit v-model="containercode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18" :offset="1">
          <el-form-item :label="$t('m.container.size')">
            <el-col :span="8" class="el-col-flex">
              <el-form-item :label="$t('m.length')" prop="extent" label-width="50px">
                <el-input maxlength="20" show-word-limit v-model="containerDetail.extent" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="el-col-flex">
              <el-form-item :label="$t('m.width')" prop="width" label-width="50px">
                <el-input maxlength="20" show-word-limit v-model="containerDetail.width" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="el-col-flex">
              <el-form-item :label="$t('m.height')" prop="height" label-width="50px">
                <el-input maxlength="20" show-word-limit v-model="containerDetail.height" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="size-total">{{parseFloat(containerDetail.extent*containerDetail.width*containerDetail.height)}}&nbsp;cm<sup>3</sup></el-col>
        <el-col :span="20" :offset="1">
          <el-form-item :label="$t('m.container.maxweight')">
            <el-input maxlength="20" show-word-limit v-model="containerDetail.maxweight" :readonly="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" class="size-total">kg</el-col>
        <el-col :span="22" :offset="1">
          <el-form-item :label="$t('m.remark')">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              style
              :rows="2"
              placeholder
              v-model="formInline.remark"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btns">
      <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
      <el-button size="mini" type="primary" @click="submit" :loading="btnLoading">{{$t('m.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {formValidate} from '@/assets/mixins/rule/container-detail-validate'
export default {
  name:'handle-container-popup',
  props:['dialogVisible','typeOptions','id'],
  mixins:[formValidate],
  data(){
    return {
      formInline:{
        code:'', // 编号
        containertypeid:'', // 容器id
        remark:'' // 备注
      },
      containerDetail:{ // 根据当前容器类型，反显明细
        extent:0, // 长
        width:0, // 宽
        height:0, // 高
        maxweight:0 // 最大放货重量
      },
      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  mounted(){
    if(this.id){
      this.getContainer()
    }
  },
  computed:{
    containertypecode(){ // 容器类型码--根据容器类型，反显数据
      let {containertypecode=''} = this.typeOptions.find((item)=>item.containertypeid === this.formInline.containertypeid) || ''
      return containertypecode
    },
    containercode(){ // 容器编号 = 容器类型码 + 编号
      if(this.containertypecode&&this.formInline.code)
        return this.containertypecode + this.formInline.code
      return ''
    }
  },
  components:{

  },
  methods:{
    close(){
      this.$emit('close')
    },
    // 根据容器id，获取容器明细
    getContainer(){
      let options = {
        method:'get',
        url:`/container/${this.id}`
      }
      this.$axios(options).then(({data})=>{
        let {containercode,containertypeid,containerid,remark} = data
        let {containertypecode} = this.typeOptions.find((item)=>item.containertypeid === containertypeid)
        let length = containertypecode.length || 0
        let code = containercode.substring(containercode.indexOf(containertypecode)+length)
        Object.assign(this.formInline,{containertypeid,containerid,code,remark})
        this.handleChange(containertypeid)
      })
    },
    // 根据当前容器类型的id，反显出容器明细
    handleChange(id){
      let {extent,width,height,maxweight} = this.typeOptions.find((item)=>{
        return item.containertypeid === id
      })
      Object.assign(this.containerDetail,{extent,width,height,maxweight})
    },
    submit(){
      this.$refs['form'].validate((valid)=>{
        if(valid){
          // 获取容器名字
          let {containertypename:containertype,containertypeid} = this.typeOptions.find((item)=>{
            return item.containertypeid === this.formInline.containertypeid
          })
          let containercode = this.containercode
          let warehouseid = this.$store.state.basicInfo.warehouseInfo.id
          // 区别 [新增 || 编辑] 请求方式&&接口地址
          let options = !this.id?{method:'post',url:`/container/add`}:{method:'put',url:'/container/update'}
          Object.assign(options,{data:Object.assign({},this.formInline,{warehouseid,containertype,containertypeid,containercode})})
          this.btnLoading = true
          this.$axios(options).then(({message})=>{
            this.btnLoading = false
            this.callbackMessage(message,'success')
            this.$emit('callback')
            this.$emit('close')
          }).catch(()=>{
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item{
  .el-col-flex{
    display: flex; word-break: keep-all; padding: 0 10px;
    ::v-deep .el-form-item{margin-bottom: 0;}
  }
  .el-col-flex:first-child{padding-left: 0;}
  .el-col-flex:last-child{padding-right: 0;}
}
.size-total{
  line-height: 32px; margin-bottom: 18px; padding-left: 10px;
  sup{line-height: 1;}
}
</style>